<template>
  <app-page card full>
    <app-page-main>
      <template #header>
        <div class="app-query">
          <el-form
            :inline="true"
            :model="pageState.query"
            @submit.prevent="pageActions.handleSearch"
            @keyup.enter="pageActions.handleSearch"
            label-width="100px"
          >
            <el-form-item label="关键字">
              <el-input v-model="pageState.query.keyword" placeholder="请输入关键字" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="search" @click="pageActions.handleSearch">搜索</el-button>
              <el-button icon="refresh" @click="pageActions.handleReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="app-action">
          <el-button type="primary" plain icon="plus" @click="pageActions.handleAdd()">弹窗添加</el-button>
          <el-button type="primary" plain icon="plus" @click="$router.push(`${$route.path}/add`)"
            >添加
          </el-button>
          <!-- v-hasPermi="['system:post:export']" -->
          <el-button type="warning" plain icon="download" @click="pageActions.handleExport()">导出</el-button>
        </div>
      </template>

      <el-table v-loading="pageState.loading" :data="pageState.data">
        <el-table-column prop="deviceId" label="设备ID" width="100"></el-table-column>
        <el-table-column prop="deviceName" label="设备名称"></el-table-column>
        <el-table-column prop="projectName" label="项目名称"></el-table-column>
        <el-table-column prop="projectId" label="项目ID"></el-table-column>
        <el-table-column prop="mac" label="设备MAC"></el-table-column>
        <el-table-column prop="vipTypeDesc" label="VIP类型">
          <template #default="scope">
            <template v-if="scope.row.vipType == 0">
              <el-tag type="warning">年会员</el-tag>
            </template>
            <template v-else>
              <el-tag>天会员</el-tag>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template #default="scope">
            <el-switch
              :before-change="
                () =>
                  pageActions.handleUpdate(
                    scope.row,
                    { isOpen: !scope.row.isOpen },
                    !isOpen ? '确认上线？' : '确认下线？',
                    '已修改'
                  )
              "
              v-model="scope.row.isOpen"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建时间"></el-table-column>
        <el-table-column label="操作" fixed="right" width="200">
          <template #default="scope">
            <el-button link type="primary" @click="pageActions.handleEdit(scope.row)">弹窗编辑</el-button>
            <el-button
              link
              type="primary"
              icon="edit"
              @click="$router.push(`${$route.path}/${scope.row[pageState.key]}/edit`)"
              >编辑</el-button
            >
            <el-button
              link
              type="primary"
              icon="edit"
              @click="$router.push(`${$route.path}/${scope.row[pageState.key]}`)"
              >详情</el-button
            >
            <el-button link type="primary" icon="delete" @click="pageActions.handleDelete(scope.row)"
              >删除</el-button
            >
            <el-button link type="primary" @click="pageActions.handleShowAudit(scope.row)">审核</el-button>
            <!-- <el-button link type="primary" @click="pageActions.handleUpdate(scope.row, { state: 1 }, '确认上线?')">上线</el-button> -->
            <!-- <el-button link type="primary" @click="pageActions.handleUpdate(scope.row, { state: 2 }, '确认下线?')">下线</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </app-page-main>

    <template #footer>
      <div class="app-toolbar"></div>
      <el-pagination
        @size-change="pageActions.handleSizeChange"
        @current-change="pageActions.handlePageChange"
        :current-page="pageState.page"
        :page-size="pageState.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageState.total"
      ></el-pagination>
    </template>

    <!-- 新增/编辑 -->
    <jax-dialog-edit
      v-model="pageState.detail"
      v-model:show="pageState.shwoEdit"
      :json="json"
      @submit="pageActions.handleSubmit()"
    ></jax-dialog-edit>
  </app-page>
</template>

<script setup>
import { usePageList } from 'jax-node'

const { pageState, pageActions } = usePageList()

const json = computed(() => {
  const required = true
  const miniInput = { style: 'width:100px' }

  return [
    { name: 'rank', label: '序号', type: 'number', tips: '（序号越小越靠前）', inputAttr: miniInput },
    { name: 'title', label: '标题', required },
    { name: 'desc', label: '描述', type: 'textarea' },
    { name: 'isOpen', label: '状态', type: 'switch' },
    // { name: 'categoryId', label: '分类', type: 'select', options: this.typeList },
    { name: 'cover', label: '封面图', type: 'upload-image' },
    { name: 'images', label: '图片列表', type: 'upload-images' },
  ]
})

// 保存前
pageActions.handleBeforeSubmit = detail => {
  return {
    vipType: detail.vipType,
  }
}
</script>

<style lang="scss" scoped></style>
